<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title><spring:message code="pattern"></spring:message></title>
    <link href="${pageContext.request.contextPath }/phone/css/list.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/phone/css/bottom.css" rel="stylesheet" />
        <link href="${pageContext.request.contextPath }/phone/css/font/iconfont.css" rel="stylesheet" />

</head>
<body>
    <div>
       
        <!--头部--有分类-->
        <div class="cate_header">
             <div class="search_top">
                <a href="javascript:history.go(-1);"></a>
                <div class="topmid">
                    <button class="search-btn" onclick="search()"></button>
                    <form id="formSearch">
                    <input name="key" value="${key}" id="key" class="search-input" placeholder="<spring:message code="patternSearch"></spring:message>" />
	                <div class="searchbox-wrap-img" id="serpic">
	                    <div class="searchbox-box-img">
		                    <div style="position:relative;width:100%;height:100%;">
		                     <c:choose>
                               <c:when test="${filePath!=''&&filePath!=null}">
                                  <img id="preview" alt="" name="pic" src="${pageContext.request.contextPath }${filePath}">
                               </c:when>            
                               <c:otherwise>
                                  <img id="preview" alt="" name="pic" src="${pageContext.request.contextPath }/upload/${filePath}">
                               </c:otherwise>
                              </c:choose>
		                    	
		                    </div>
	                    </div>
	                    <span class="serimg-close" id="serimg-close">X</span>
	                    <input type="hidden" id="imgData" name="filePath" value="${filePath}"/>
	                </div>
	                <i class="Hui-iconfont Hui-iconfont-zhaoxiangji ri" onclick="searchImg()"></i>
	                <input type="file" name="file" id="file" onchange="uploadImg()">
	                </form>
                </div>
                <div class="clr"></div>
            </div>
            <ul class="cate_big">
            <c:set var="canshu" value="-${canshu }-" />
            <c:forEach items="${shuju}" var="item">
                <li class="designs_filter">
               		 <c:set var="flag" value="${item.fuji.ptName}" />
						<%-- <c:forEach items="${item.zi}" var="zi">
							<c:set var="ptid" value="-${zi.ptId }-" />
							<c:if test="${fn:contains(canshu,ptid)}">
								<c:set var="flag" value="${zi.ptName }" />
							</c:if>
						</c:forEach> --%>
                    <a href="JavaScript:void(0);">${flag}</a>
                    <ul class="cate_ul hide">
					 <li class="designs_filter_selected" rel=""><a href="JavaScript:void(0);"><spring:message code="pattern.unlimit"></spring:message></a></li>
                    <c:forEach items="${item.zi}" var="zi">
                    <c:set var="ptid" value="-${zi.ptId }-" />
                        <li class="designs_filter_selected ${fn:contains(canshu,ptid)?'olll':''}" rel="${zi.ptId }" ren='${zi.ptName }'><a href="JavaScript:void(0);">${zi.ptName }</a></li>
					</c:forEach>
                    </ul>
                </li>
            </c:forEach>    
                <li class="designs_filter">
               		<c:choose>
                	<c:when test="${fn:contains(canshu,'01')}">
                	<a href="JavaScript:void(0);"><spring:message code="pattern.share"></spring:message></a>
                	</c:when>
                	<c:when test="${fn:contains(canshu,'02')}">
                	<a href="JavaScript:void(0);"><spring:message code="pattern.vip"></spring:message></a>
                	</c:when>
                	<c:when test="${fn:contains(canshu,'03')}">
                	<a href="JavaScript:void(0);"><spring:message code="pattern.new"></spring:message></a>
                	</c:when>
                	<c:when test="${fn:contains(canshu,'04')}">
                	<a href="JavaScript:void(0);"><spring:message code="pattern.attention"></spring:message></a>
                	</c:when>
                	<c:otherwise>
                	<a href="JavaScript:void(0);"><spring:message code="zhuangtai"></spring:message></a>
                	</c:otherwise>
                   </c:choose>
                    <ul class="cate_ul hide">
                     <li rel="" class="designs_filter_selected ${fn:contains(canshu,'-0')?'olll':''}"><a href="JavaScript:void(0);"><spring:message code="pattern.unlimit"></spring:message></a></li>
                     <li rel="01" class="designs_filter_selected ${fn:contains(canshu,'01')?'olll':''}"><a href="JavaScript:void(0);"><spring:message code="pattern.share1"></spring:message></a></li>
                     <li rel="02" class="designs_filter_selected ${fn:contains(canshu,'02')?'olll':''}"><a href="JavaScript:void(0);"><spring:message code="pattern.vip"></spring:message></a></li>
                     <li rel="03" class="designs_filter_selected ${fn:contains(canshu,'03')?'olll':''}"><a href="JavaScript:void(0);"><spring:message code="pattern.new1"></spring:message></a></li>
                     <li rel="04" class="designs_filter_selected ${fn:contains(canshu,'04')?'olll':''}"><a href="JavaScript:void(0);"><spring:message code="pattern.attention1"></spring:message></a></li>
                    </ul>
                </li>
                <div class="clr"></div>
            </ul>
        </div>
   <form action="${pageContext.request.contextPath }/api/patternfilter/flowertypecatalog${pageInfo.page+1 }" method="post" id="formSearchHou">
     <input id="fileImgHou" type="hidden" name="filePath" value="${param.filePath}"/>
     <input id="keyHou" type="hidden" name="key" value="${param.key}"/>
     <input name="page" type="hidden" value="${pageInfo.page+1}"/>
   </form>
   <form action="${pageContext.request.contextPath }/api/patternfilter/flowertypecatalog${pageInfo.page-1 }" method="post" id="formSearchQian">
     <input id="fileImgQian" type="hidden" name="filePath" value="${param.filePath}"/>
     <input id="keyQian" type="hidden" name="key" value="${param.key}"/>
     <input name="page" type="hidden" value="${pageInfo.page-1}"/>
   </form>
        <div role="main" class="main" style="margin-top:90px;">
            <!--花型-->
            <div class="huaxing">
                <ul>
                <c:forEach var="item" items="${pattern }">
                    <li>
                        <a href="javascript:xiangqing('${item.P_VIP}','${item.P_ID}')">
                            <div class="img_squre" style="background-image:url(${pageContext.request.contextPath }/upload/compression/${item.P_IMG});"></div>
                             </a>
                    <c:if test="${member!=null}">
					<c:if test="${item.id==null }">
					<div onclick="guanzhu(this)" ael="${item.P_ID }" class="ex-exploit-like">
					<img class="no" src="${pageContext.request.contextPath }/phone/img/icon_addcollection.png">
					</div>
					</c:if>
					<c:if test="${item.id!=null}">
					<div onclick="quxiaoguanzhu(this)" ael="${item.P_ID }" class="ex-exploit-like">
					<img class="no" src="${pageContext.request.contextPath }/phone/img/icon_alreadycollected.png">
					</div>
					</c:if>
					</c:if>
					
					 <a href="javascript:xiangqing('${item.P_VIP}','${item.P_ID}')">
                            <span><spring:message code="pattern.no"></spring:message>${item.P_NO }</span>
                            <br/>
                            <span><spring:message code="pattern.size"></spring:message>${item.CHICUN }cm 
                            <c:if test="${item.P_VIP==2 }">
                            <i>VIP</i>
                            </c:if>
                            </span>
                        </a>
                    </li>
                    </c:forEach>
                    <div class="clr"></div>
                    <div class="fenye_div">
                        <span class="fenye">
					<c:if test="${pageInfo.page>1}">
						<button type="button" onclick="shangyiye()"  class="before-page"><spring:message code="pattern.previous"></spring:message></button>
						</c:if>
					<c:if test="${pageInfo.page<pageInfo.totalPage}">
						<button type="button" onclick="xiayiye()" class="next-page"><spring:message code="pattern.next"></spring:message></button>
						</c:if>	
						   </span>
                    </div>
                </ul>
                
            </div>
            <!--花型-->

        </div>
    <script src="${pageContext.request.contextPath }/phone/js/jquery-1.8.3.min.js"></script>
        <script src="${pageContext.request.contextPath }/phone/js/ajaxfileupload.js"></script>
        <jsp:include page="../main/bottom.jsp"><jsp:param name="bottom" value="2"/></jsp:include>

   </div>
    <script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/layer_mobile/layer.js"></script>
    <script src="${pageContext.request.contextPath }/phone/js/top_nav.js"></script>
	<script type="text/javascript">
    $(function(){
	 if($("#preview").attr("src")!="${pageContext.request.contextPath }/upload/")
	 {
		 $("#serpic").show();
		 $("#serimg-close").click(function(){
			 $("#preview").removeAttr("src");
			 $("#imgData").val("");   
			 $(this).parent().hide();
			 $(".topBar .topmid input[type=text]").css("width","80%");
		 });
		 
	 }
    });
	function searchImg(){
		$("input[type=file]").click();
	}
	function uploadImg(){
		$.ajaxFileUpload({
	            url: '${pageContext.request.contextPath }/upload/upload', //用于文件上传的服务器端请求地址
	            secureuri: false, //是否需要安全协议，一般设置为false
	            type: 'post',
	            fileElementId: 'file', //文件上传域的ID
	            dataType: 'json', //返回值类型 一般设置为json
	            success: function (data, status)  //服务器成功响应处理函数
	            {
	            	
	            	$("#preview").attr("src",'${pageContext.request.contextPath }/upload/'+data.trim());	
	            	$("#imgData").val('/upload/'+data.trim());   
		        	$("#serpic").show();
					//alert($("#preview").height());
		       		$("#preview").css({
		       			 //"top":"50%",
		       			 //"margin-top":"-"+$("#preview").height()/2+"px"
		       		});
		        	$("#key").val("");
			        $("#serimg-close").click(function(){
						 $("#preview").removeAttr("src");
						 $("#imgData").val("");   
						 $(this).parent().hide();
						 $(".topBar .topmid input[type=text]").css("width","80%");
					 });
					 $(".topBar .topmid input[type=text]").css("width","60%");
	            }
	           
	        });	
	 }
	
	function geturl() {
		var url = '';
		var cs = new Array();
		$('.olll').each(function() {
			if ($(this).attr('rel') && $(this).attr('rel').length > 0) {
				if($(this).attr('rel')=="02"){
				}
				cs.push($(this).attr('rel'));
			}
		});
		cs.sort();
		if (cs.length > 0) {
			url = '${pageContext.request.contextPath }/api/pattern/'
					+ cs.join('-') + '/flowertypecatalog';
		} else {
			url = ''
		}
		return url;
	}
	
	$('.designs_filter_selected').click(				
			function() {
				var flag = false;
				$(this).addClass("olll").siblings().removeClass("olll");
				var url = geturl();
				if (url.length == 0) {
					url = '${pageContext.request.contextPath }/api/pattern/all/flowertypecatalog1/';
					location.href=url;
				}else{
					if(url.indexOf("02") > 0 ){
						 $.ajax({url:'${pageContext.request.contextPath }/web/patternfilter/judge', async : false,type : "POST",  success :function(result){
			    			 var status=result.msg.status;
			    			 var desc=result.msg.desc;
			    			    if(status == 1){//没登录
			    			    	layer.open({
			    	 				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
			    	 				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
			    	 				    ,yes: function(index){
			    	 				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
			    	 				      layer.close(index);
			    	 				    }
			    	 				    ,no: function(index){
			    	 				    	location.reload(true);
			    	 				    }
			    	 				  });
			    			    	
			    			    	flag=true;
			    			    }else if(status ==2){
			    			    	layer.open({
			    	 				    content: '<spring:message code="flowertypecatalog.applyForVIP"></spring:message>'
			    	 				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
			    	 				    ,yes: function(index){
			    	 				    	location.href="${pageContext.request.contextPath}/web/vip/applicationForVIP";
			    	 				      layer.close(index);
			    	 				    }
			    	 				    ,no: function(index){
			    	 				    	location.reload(true);
			    	 				    }
			    	 				  });
			    			    	
			    			    	flag=true;
			    			    }
			    		  }
						 });
					}
					if(flag){
						return;
					}
					location.href = url+'1';
					return false;
					
				}
				//$(this).closest("li").parents(".designs_filter").children("a").html($(this).attr("ren"));
			});
	function shangyiye(){
		
		var url = geturl();
		if($("#fileImgQian").val()!=""||$("#keyQian").val()!="")
			{
			 $("#formSearchQian").submit();
			}
		else{
			if (url.length == 0) {
				url = '${pageContext.request.contextPath }/api/pattern/all/flowertypecatalog${pageInfo.page-1 }/';
				location.href=url;
			}else{
				location.href = url+${pageInfo.page-1 };
				return false;
			}
		}					
		
		return true;
	}
	function xiayiye(){
		var url = geturl();
		if($("#formSearchHou").val()!=""||$("#keyHou").val()!="")
		{
		 $("#fileImgHou").submit();
		}
	else
		{
		
			if (url.length == 0) {
				url = '${pageContext.request.contextPath }/api/pattern/all/flowertypecatalog${pageInfo.page+1 }/';
				location.href=url;
			}else{
				location.href = url+${pageInfo.page+1 };
				return false;
			}
		}
		
		return true;
	}
	
	function guanzhu(obj){
		$.ajax({
			 url:'${pageContext.request.contextPath }/web/patternfilter/collect',
			 async : false,
			 data: {pId:$(obj).attr("ael")},
			 type : "POST", 
			 success :function(result){
			 var status=result.msg.status;
			 var desc=result.msg.desc;
			 if(status == 0){
				$(obj).find("img").attr("src","${pageContext.request.contextPath }/web/img/icon_alreadycollected.png");
				$(obj).find("img").attr("class","no");
				$(obj).attr("onclick","quxiaoguanzhu(this)");
				layer.open({content: '<spring:message code="flowertypecatalog.successful"></spring:message>',skin: 'msg',time: 1});
	   	   		
			 }else if(status == 2){//没登录
				 layer.open({
 				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
 				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
 				    ,yes: function(index){
 				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
 				      layer.close(index);
 				    }
 				  });
				 
			 
			    }else if(status ==1){//失败
			    	layer.open({content: '<spring:message code="flowertypecatalog.failed"></spring:message>',skin: 'msg',time: 1});
		   	   		
			    }
			 }
			 });
	}
	
	function quxiaoguanzhu(obj){
		$.ajax({
   			 url:'${pageContext.request.contextPath }/web/patternfilter/delcollect',
   			 async : false,
   			 data: {pId:$(obj).attr("ael")},
   			 type : "POST", 
   			 success :function(result){
   			 var status=result.msg.status;
   			 var desc=result.msg.desc;
   			 if(status == 0){
   				$(obj).find("img").attr("src","${pageContext.request.contextPath }/web/img/icon_addcollection.png");
   				$(obj).find("img").attr("class","no");
   				$(obj).attr("onclick","guanzhu(this)");
   				layer.open({content: '<spring:message code="flowertypecatalog.successful"></spring:message>',skin: 'msg',time: 1});
   	   	   		
   			 }else if(status == 2){//没登录
   				 layer.open({
    				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
    				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
    				    ,yes: function(index){
    				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
    				      layer.close(index);
    				    }
    				  });
   				
   			 
   			    }else if(status ==1){//失败
   			    	layer.open({content: '<spring:message code="flowertypecatalog.failed"></spring:message>',skin: 'msg',time: 1});
   		   	   		
   			    }
   			 }
   			 });
		
	}
	
	function xiangqing(vip,patternId){
		if(vip==2){
			$.ajax({url:'${pageContext.request.contextPath }/web/patternfilter/judge', async : false,type : "POST",  success :function(result){
   			 var status=result.msg.status;
   			 var desc=result.msg.desc;
   			    if(status == 1){//没登录
   			     layer.open({
   				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
   				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
   				    ,yes: function(index){
   				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
   				      layer.close(index);
   				    }
   				  });
   			    	
   			    	
   			    	flag=true;
   			    }else if(status ==2){
   			     layer.open({
    				    content: '<spring:message code="flowertypecatalog.applyForVIP"></spring:message>'
    				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
    				    ,yes: function(index){
    				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/applyForVip";
   			        		layer.close(index);
    				    }
    				  });
   			     
   			    	
   			    	
   			    }else{
   			    	top.location.href='${pageContext.request.contextPath}/api/toPhonePage/patternShiyi?id='+patternId;	
   			    }
   		  	}
			});
			}else{
				$.ajax({url:'${pageContext.request.contextPath }/web/patternfilter/judge', async : false,type : "POST",  success :function(result){
		   			 var status=result.msg.status;
		   			 var desc=result.msg.desc;
		   			 
		   			    if(status == 1){//没登录
		   			     layer.open({
		    				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
		    				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
		    				    ,yes: function(index){
		    				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
		    				    	layer.close(index);
		    				    }
		    				  });
		   			    	
		   			    	
		   			    	
		   			    }else{
		   			    	top.location.href='${pageContext.request.contextPath}/api/toPhonePage/patternShiyi?id='+patternId;
		   			    }
			}
		});
			}
		
	}
	
	 
    /* 图片搜索 */
    function search()
    {  	  		 
	  	
	  	 if( $("#imgData").val()!=""&&$("#imgData").val()!=null)
	  	 {    
	  		 $("#formSearch").attr('action','${pageContext.request.contextPath }/api/patternfilter/flowertypecatalog1');
	  		 $("#formSearch").submit();
	  	 }
	  	 else
	  	 {   		
	  		 if($("#key").val()!=""&&$("#key").val()!=null)
	  		 {    
	  			 $("#formSearch").attr('action','${pageContext.request.contextPath }/api/patternfilter/flowertypecatalog1');
	  			 $("#formSearch").submit();
	  		 }   
	  		 else
	  		 {
	  			layer.open({content: '<spring:message code="head.enterSearchKeyword"></spring:message>',skin: 'msg',time: 1});
	   	   		
	  			 return false;
	  		 }
	  	 }    	
    }
	</script>
</body>
</html>
